<template>
	<!-- 个人中心 -->
	<view class="container">
    <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
      <image class="avatar" :src="$util.img(userinfo.avatar)"></image>
    </button> 
    <view class="input">
      <view class="input-label">昵称：</view>
      <input type="nickname" v-model="userinfo.nickname" @change="getNickname" class="input-txt" placeholder="请输入昵称"/>
    </view>
	<view class="input">
	  <view class="input-label">姓名：</view>
	  <input type="text" v-model="userinfo.username"  class="input-txt" placeholder="请输入您的姓名"/>
	</view>
	<view class="input" style="height: auto;border-bottom: 0;">
	  <view class="input-label">个人简介：</view>
	  <textarea type="text" v-model="userinfo.bio"  class="input-txt" placeholder="请输入个人简介"/>
	</view>
    <view class="bank_bottom" @tap="addUserInfo()">
        保存
      </view>
	</view>
</template>

<script>
	
	import http from 'common/js/http.js';
	export default {
		mixins:[http],
		data() {
			return {
				userinfo:{},
				token: '',
        nickname: '',
		bio:'',
        avatar: '',
        url: ''
			}
		},
    onShow() {
    if(uni.getStorageSync('token')){
    	this.token = uni.getStorageSync('token')
    }
    this.userinfo = uni.getStorageSync('userinfo')
    console.log(this.userinfo)
    },
	
		methods: {
			// 保存
			addUserInfo() {
				this.sendRequest({
					url:'user/profile',
					data:{
						username:this.userinfo.username,
						nickname:this.userinfo.nickname,
						bio:this.userinfo.bio,
						avatar:this.userinfo.avatar
					},
					success:res=>{
						if(res.code>0){
								uni.setStorageSync('userinfo',this.userinfo)
								uni.showToast({
								  title: '保存成功',
								  icon: 'none'
								})
								uni.navigateBack()
						}
					}
				})
			
			},
      getNickname(e) {
        console.log(e, 'e----')
        this.userinfo.nickname = e.detail.value
      },
      onChooseAvatar(e) {
        this.userinfo.avatar = e.detail.avatarUrl
        let that = this
       // let urlPath = HTTP_ADMIN_URL + '/api/front/user/upload/image?model=maintain&pid=0'
				let localPath = e.detail.avatarUrl;
        console.log(e.detail.avatarUrl)
				uni.uploadFile({
					url: 'https://cun.polarislaser.cn/api/volunteer/upload',
								
					filePath: localPath,
					name: 'file',
					header: {
						'content-type': 'multipart/form-data'
					},
					success: function(res) {
						let data = res.data ? JSON.parse(res.data) : {};
						 that.userinfo.avatar = data.data.url
				
					},
					fail: function(res) {
						uni.showToast({
							title: '上传图片失败'
						});
					}
				})
      }
		}
	}
</script>

<style lang="scss">
	textarea{
		height: 150rpx;
		padding: 40rpx;
		margin-top: 20rpx;
		background-color: #F9F9F9;
		border:1rpx solid #ebebeb;
		margin-bottom:40rpx
	}
.container {
  padding: 40rpx;
}
.avatar-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
border: 0;
background: none;
}
.avatar-wrapper::before{
	border: none;
}.avatar-wrapper::after{
	border: none;
}
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.input {
  display: flex;
  border-bottom: 1px solid #ccc;
  height: 80rpx;
  align-items: center;
  margin-top: 40rpx;
  &-label {
    width: 200rpx
  }
  &-txt {
    flex: 1;
  }
}
.bank_bottom {
    width: 100%;
    margin-top: 39rpx;
    padding: 22rpx 0;
    text-align: center;
    background: #0256FF;
    border-radius: 55rpx;
    font-size: 32rpx;
    color: #FFFFFF;
  }
  page{
	  background-color: #fff;
  }
</style>
